<template>
  <div class="monitor-chart-container">
    <!-- 标题组件 -->
    <Title :title="title"></Title>
    <!-- 图表容器 -->
    <div ref="chartContainer" style="height: 360px;"></div>
  </div>
</template>

<script setup>
import { Bar } from '@antv/g2plot';
import Title from './Title.vue';
import { ref, onMounted, onUnmounted } from 'vue';
import { get } from '@/utils/request';

// 组件标题
const title = ref('南通市崇川区监测视频统计');
// 图表容器引用
const chartContainer = ref(null);
// 图表实例引用
let barChart = null;

// 模拟数据 - 南通市崇川区各监测点视频数量
const monitorData = [
  { name: '崇川区智慧城管', videos: 28 },
  { name: '崇川区环保监测', videos: 15 },
  { name: '崇川区交通枢纽', videos: 42 },
  { name: '崇川区重点路段', videos: 36 },
  { name: '崇川区校园安全', videos: 23 },
  { name: '崇川区社区安防', videos: 31 },
  { name: '崇川区河道监测', videos: 12 },
];

// 加载柱状图
const loadMonitorChart = () => {
  barChart = new Bar(chartContainer.value, {
    data: monitorData,
    xField: 'videos',
    yField: 'name',
    seriesField: 'name',
    color: ({ name }) => {
      // 根据不同类型设置不同颜色
      if (name.includes('智慧城管')) return '#5B8FF9';
      if (name.includes('环保')) return '#5AD8A6';
      if (name.includes('交通')) return '#F6BD16';
      if (name.includes('路段')) return '#E86452';
      if (name.includes('校园')) return '#6DC8EC';
      if (name.includes('社区')) return '#945FB9';
      return '#FF9845';
    },
    legend: {
      position: 'top-left',
      itemName: {
        style: {
          fill: '#fff',
          fontSize: 12,
        },
      },
    },
    yAxis: {
      label: {
        style: {
          fill: '#fff',
        },
        autoRotate: false,
      },
    },
    xAxis: {
      label: {
        style: {
          fill: '#fff',
        },
        formatter: (v) => `${v}个`,
      },
      grid: {
        line: {
          style: {
            stroke: 'rgba(255, 255, 255, 0.1)',
          },
        },
      },
    },
    label: {
      position: 'right',
      style: {
        fill: '#fff',
        fontSize: 12,
      },
      formatter: (datum) => `${datum.videos}路`,
    },
    tooltip: {
      domStyles: {
        'g2-tooltip': {
          background: 'rgba(0, 0, 0, 0.75)',
          color: '#fff',
          boxShadow: '0 4px 12px 0 rgba(0, 0, 0, 0.12)',
          borderRadius: '4px',
        },
        'g2-tooltip-title': {
          color: '#fff',
        },
        'g2-tooltip-list-item': {
          color: '#fff',
        },
      },
      customContent: (title, items) => {
        return `<div style="padding: 8px 12px;">
          <div style="margin-bottom: 8px;font-weight:bold;">${title}</div>
          <div>监测视频数量: <span style="color:#5B8FF9">${items[0]?.value}路</span></div>
          <div>所属区域: <span style="color:#5AD8A6">南通市崇川区</span></div>
        </div>`;
      },
    },
    interactions: [
      { type: 'active-region' },
      { type: 'element-highlight' },
    ],
    animation: {
      appear: {
        animation: 'scale-in-x',
        duration: 2000,
      },
    },
  });

  barChart.render();
};

// 获取真实数据
const fetchMonitorData = async () => {
  try {
    const res = await get('/api/nantong/chongchuan/monitors');
    console.log('监测视频数据:', res);
    // 处理返回数据并更新图表
    // barChart.update({ data: res.data });
  } catch (error) {
    console.error('获取监测视频数据失败:', error);
  }
};

onMounted(async () => {
  await fetchMonitorData();
  loadMonitorChart();
});

onUnmounted(() => {
  // 销毁图表实例
  if (barChart) {
    barChart.destroy();
  }
});
</script>

<style lang="less" scoped>
.monitor-chart-container {
  background: rgba(16, 42, 67, 0.5);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  
  // 响应式调整
  @media (max-width: 768px) {
    padding: 8px;
    
    :deep(.g2-legend) {
      display: none !important;
    }
  }
}
</style>